/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component,Fragment } from 'react';
import { Form, Input, DatePicker, Select, InputNumber, Button, Tooltip, Icon, Alert } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import request from '@/utils/request';
import find from 'lodash/find';

const FormItem = Form.Item;
const Option = Select.Option;
let uuid = 10;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meterArr: [1, 2, 3, 4, 5, 6, 7, 8],
      meterActiveKey: ['1', '2', '3', '4', '5', '6', '7', '8'],
      meter1: [],
      meter2: [],
      meter3: [],
      meter4: [],
      meter5: [],
      meter6: [],
      meter7: [],
      meter8: [],
    };
  }

  clearTable = () => {
    uuid = 10;
    this.setState({
      meterArr: [1, 2, 3, 4, 5, 6, 7, 8],
      meterActiveKey: ['1', '2', '3', '4', '5', '6', '7', '8'],
      meter1: [],
      meter2: [],
      meter3: [],
      meter4: [],
      meter5: [],
      meter6: [],
      meter7: [],
      meter8: [],
    });
    this.props.form.resetFields();
  };

  componentDidMount() {
    const that = this;
    if(this.props.type==='config'){
      // this.props.editRecord.meters=[{index:1,caliber:"DN100",initial_value:100},{index:2,caliber:"DN120",initial_value:10},{index:3,caliber:"DN10",initial_value:8}]
      if(this.props.type==='config'&&this.props.editRecord&&this.props.editRecord.config&&this.props.editRecord.config.meter_config){
        for(let i=0;i<this.props.editRecord.config.meter_config.length;i++){
          let item=i+1
          that.props.form.setFieldsValue({
            [`index-${item}`]:this.props.editRecord.config.meter_config[i].index,
            [`caliber-${item}`]:this.props.editRecord.config.meter_config[i].caliber,
            [`initial_value-${item}`]:this.props.editRecord.config.meter_config[i].initial_value,
          })
        }
      }
    }

  }

  deleteMeter = (item) => {
    console.log('删除的item', item);
    const that=this;
    if (this.state.meterArr.length === 1) {
      console.log('只有一个水表');
      // message.error('至少需要一个水表')
      // return false
    }
    // const index = this.state.meterArr.indexOf(item);
    // console.log('index', index);
    that.props.form.setFieldsValue({
      [`index-${item}`]:'',
      [`caliber-${item}`]:'',
      [`initial_value-${item}`]:'',
    })
  };

  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    const { getFieldDecorator } = this.props.form;
    const meterForms = this.state.meterArr.map((item, index) => {
      return (
        <Form style={{ display: 'flex' }} className={'custom-table-form'} key={index} layout="inline">
          <FormItem
            style={{ width:'100px', marginRight: '0' }}

          >
            {getFieldDecorator(`index-${item}`, {
              initialValue: '',
            })(
              <Input style={{ width: '100px', fontWeight: 'bold' }}/>,
            )}
          </FormItem>
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`caliber-${item}`, {
              initialValue: '',
            })(
              <Select   style={{width:'145px',fontWeight:'bold'}}>
                {[{key:'未知',value:'未知'},
                  {key:'DN15',value:'DN15'},
                  {key:'DN20',value:'DN20'},
                  {key:'DN25',value:'DN25'},
                  {key:'DN32',value:'DN32'},
                  {key:'DN40',value:'DN40'},
                  {key:'DN50',value:'DN50'},
                  {key:'DN65',value:'DN65'},
                  {key:'DN80',value:'DN80'},
                  {key:'DN100',value:'DN100'},
                  {key:'DN150',value:'DN150'},
                  {key:'DN200',value:'DN200'},
                  {key:'DN300',value:'DN300'},
                ].map(function(item,index) {
                  return <Option key={index} value={item.key}>
                    {item.value}
                  </Option>
                })}
              </Select>
            )}
          </FormItem>
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`initial_value-${item}`, {
              initialValue: '',
            })(
              <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
            )}
          </FormItem>
          <div style={{ width: '80px', lineHeight: '29px', textAlign: 'center', border: '1px solid #d9d9d9' }}>
            <Button
              style={{ height: '22px' }}
              type="danger"
              size="small"
              icon="delete"
              onClick={(e) => {
                e.stopPropagation();
                this.deleteMeter(item);
              }
              }
            >删除
            </Button>
          </div>


        </Form>
      );
    });
    return (
      <div>
        {
          this.props.type!=='config'?
            <Form>
             {/* <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               平台
            </span>
                )}
              >
                {getFieldDecorator('platform', {
                  initialValue: (this.props.editRecord&&this.props.editRecord.config.platform)?this.props.editRecord.config.platform:'',
                  rules: [{ required: true, message: '请输入平台' }],
                })(
                  <Select disabled={Boolean(this.props.editRecord)}>
                    <Option value={'电信'}>电信</Option>
                    <Option value={'移动'}>移动</Option>
                  </Select>
                )}
              </FormItem>*/}
              {
                !sessionStorage.getItem('company_id')&&
                <FormItem label="所属分站"
                          {...formItemLayoutWithLabel}>
                  {getFieldDecorator('company_id', {
                    initialValue: '',
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select style={{ width: '100%' }} allowClear={false}>
                      {
                        JSON.parse(sessionStorage.getItem('management_companies')).map((item,index)=>{
                          return <Option key={index} value={item.id}>
                            {item.name}
                          </Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              }
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               集中器号码
            </span>
                )}
              >
                {getFieldDecorator('number', {
                  initialValue: this.props.editRecord?this.props.editRecord.number:'',
                  rules: [{ required: true, message: '请输入集中器号码' }],
                })(
                  <Input />
                )}
              </FormItem>
        {/*      <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               IMEI
            </span>
                )}
              >
                {getFieldDecorator('imei', {
                  initialValue: this.props.editRecord?this.props.editRecord.imei:'',
                  rules: [{ required: true, message: '请输入IMEI' }],
                })(
                  <Input disabled={Boolean(this.props.editRecord)}/>
                )}
              </FormItem>*/}
              <FormItem
                {...formItemLayoutWithLabel}
                label={(
                  <span>
               备注
            </span>
                )}
              >
                {getFieldDecorator('remark', {
                  initialValue: this.props.editRecord?this.props.editRecord.remark:'',
                })(
                  <Input />
                )}
              </FormItem>
            </Form>:<Fragment>
              <Form>
                <FormItem
                  {...formItemLayoutWithLabel}
                  label={(
                    <span>
               集中器平台
            </span>
                  )}
                >
                  {getFieldDecorator('platform', {
                    initialValue: this.props.editRecord.config.platform?this.props.editRecord.config.platform:'',
                  })(
                    <Input disabled={true}/>
                  )}
                </FormItem>
              </Form>
              <div style={{ border: '1px solid #d9d9d9', marginTop: '10px' }}>

              <div style={{
                display: 'flex',
                fontWeight: 'bold',
                lineHeight: '32px',
                height: '32px',
                background: 'rgb(249,249,249)',
              }}>
                <div style={{ width: '100px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>端子号</div>
                <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>口径</div>
                <div style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>初始水量</div>
                <div style={{ width: '80px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>操作</div>
              </div>
              {meterForms}

            </div>

            </Fragment>
        }


      </div>

    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


